﻿@{
    ViewBag.Title = "Home Page";
}
<link rel="stylesheet" href="~/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="~/zTree/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="~/zTree/js/jquery.ztree.core-3.5.min.js"></script>


<form role="form">
    <div class="form-group">

        <label for="name">依赖关系</label>
        <select class="form-control" id="dependencyRelation" name="dependencyRelation" style="width:500px" onchange="UpdateAppIdList()">
            <option value="0">全部</option>
            <option value="1">服务消费者</option>
            <option value="2">服务提供者</option>
        </select>

        <label for="name" id="name">名称</label>

        <select class="form-control" style="width:500px" id="appid" name="appid" >
            <option value="">全部</option>
        </select>

        <button type="submit" class="btn btn-default" style="margin-left:20px;" onclick="query(); return false;">查询</button>
    </div>
    <br /><br />
    <div class="form-group">

        <div class="zTreeDemoBackground left" style="margin-top:20px;">
            <ul id="zTree" class="ztree"></ul>
        </div>

    </div>

</form>

<script type="text/javascript">

        function filter(treeId, parentNode, childNodes) {

            if (!childNodes) {

                return null;
            }

			return childNodes;
		}

        function query()
        {
            var setting = {
		        async: {
		            enable: true,
		            url: "/Home/Index",
		            autoParam: [],
		            otherParam: { "dependencyRelation": $("#dependencyRelation")[0].value, "appid": $("#appid")[0].value },
		            dataFilter: filter
		        },
		        callback: {
		            onAsyncSuccess: zTreeOnAsyncSuccess
		        }
		    };

		    $.fn.zTree.init($("#zTree"), setting);
        }
        
        //异步加载完成后展开
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
            $.fn.zTree.getZTreeObj("zTree").expandAll(true);
        };

        function UpdateAppIdList()
        {
            $("#appid").empty();
            $("#appid").append("<option value=\"\">全部</option>");
            $.ajax({
                type: "GET",
                url: "/Home/GetAppIdListByDependencyRelation?dependencyRelation=" + $("#dependencyRelation")[0].value,
                dataType: "json",
                success: function (data) {

                    $.each(data, function (n, e) {
                        $("#appid").append("<option value=\"" + e + "\">" + e + "</option>");
                    });
                }
            });
        }

        $(document).ready(function () {
            UpdateAppIdList();
        });
</script>

